import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { Button } from 'antd';
import { connect } from "react-redux";

class CustomLayer extends Component {
    removeDeafultLayer(){
        const { viewer } = this.props;
        viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
    }

    addGoogleLayer(){
        const { viewer } = this.props;
        viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
            url: 'http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}',
            tilingScheme: new Cesium.WebMercatorTilingScheme()
        }));
        viewer.scene.globe.depthTestAgainstTerrain = false;
    }

    addLight(){
        const { viewer } = this.props;
        viewer.scene.globe.enableLighting = true;
    }

    addRotation(){
        const { viewer } = this.props;
        viewer.camera.rotateLeft(Cesium.Math.toDegrees(0.005).toFixed(2));
    }

    addLayer1(){
        const { viewer } = this.props;
        viewer.dataSources.removeAll();
        viewer.dataSources.add(Cesium.GeoJsonDataSource.load('https://cesiumjs.org/Cesium/Apps/SampleData/ne_10m_us_states.topojson'));
    }

    addLayer2(){
        const { viewer } = this.props;
        viewer.dataSources.removeAll();
        Cesium.Math.setRandomNumberSeed(0);

        let promise = Cesium.GeoJsonDataSource.load('https://cesiumjs.org/Cesium/Apps/SampleData/ne_10m_us_states.topojson');
        promise.then(function(dataSource) {
            viewer.dataSources.add(dataSource);

            let entities = dataSource.entities.values;

            let colorHash = {};
            for (let i = 0; i < entities.length; i++) {
                let entity = entities[i];
                let name = entity.name;
                let color = colorHash[name];
                if (!color) {
                    color = Cesium.Color.fromRandom({
                        alpha : 1.0
                    });
                    colorHash[name] = color;
                }

                entity.polygon.material = color;
                entity.polygon.outline = false;

                entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
            }
        }).otherwise(function(error){
            window.alert(error);
        });
    }

    render(){
        return (
            <div className="btn">
                <Button onClick={this.removeDeafultLayer.bind(this)}>删除默认影像</Button>
                <Button onClick={this.addGoogleLayer.bind(this)}>加载谷歌影像</Button>
                <Button onClick={this.addLight.bind(this)}>开光照</Button>
                <Button onClick={this.addRotation.bind(this)}>开启自转</Button>
                <Button onClick={this.addLayer1.bind(this)}>添加图层1</Button>
                <Button onClick={this.addLayer2.bind(this)}>添加图层2</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer
});
export default connect(mapStateToProps,{})(CustomLayer);